<template>
	<view class="addCamper">
		<view class="head-box">请选择出行人员证件信息，用于购买保险并订做营期用品。</view>
		<view class="container-box white-bg auto-box">
			<scroll-view scroll-y="true" style="height: 100%">
				<view>
					<view class="flex-box">
						<view class="marks-box"></view>
						<view class="title">营员信息</view>
					</view>

					<view class="flex-box border-bottom-box form-item top-box">
						<view class="right-box">姓名</view>
						<view class="auto-box">
							<input style="fontsize: 24rpx" placeholder-class="placeholder-box" placeholder="请输入营员真实姓名" type="text" v-model="infoForm.userName" />
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">证件类型</view>
						<view class="uni-list-cell-db auto-box">
							<picker range-key="label" class="flex-box" @change="bindPickerCertificateTypeChange" :value="infoForm.certificateType" :range="certificateTypeList">
								<view class="uni-input auto-box">{{ certificateTypeList.find((item) => item.value == infoForm.certificateType)?.label }}</view>
							</picker>
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">证件号码</view>
						<view class="auto-box">
							<input style="fontsize: 24rpx" placeholder-class="placeholder-box" placeholder="请输入证件号码" type="text" v-model="infoForm.idNo" />
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">出生日期</view>
						<view class="uni-list-cell-db auto-box">
							<picker mode="date" class="flex-box" @change="bindPickerBirthdayChange">
								<view :class="['uni-input', infoForm.birthday ? '' : 'placeholder-box']">{{ infoForm.birthday || '请选择出生日期' }}</view>
							</picker>
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">性别</view>
						<view class="auto-box">
							<uv-radio-group v-model="infoForm.gender" placement="row">
								<uv-radio
									activeColor="#43cf7c"
									:customStyle="{ marginRight: '20rpx', fontSize: '28rpx' }"
									v-for="(item, index) in genderList"
									:key="index"
									:label="item.label"
									:name="item.value"
								></uv-radio>
							</uv-radio-group>
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">身高(CM)</view>
						<view class="auto-box">
							<input placeholder-class="placeholder-box" placeholder="请输入营员身高，如135" type="number" v-model="infoForm.height" />
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">体重(KG)</view>
						<view class="auto-box">
							<input placeholder-class="placeholder-box" placeholder="请输入营员体重，如35" type="number" v-model="infoForm.weight" />
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">体型</view>
						<view class="auto-box">
							<uv-radio-group v-model="infoForm.bodyType" placement="row">
								<uv-radio
									activeColor="#43cf7c"
									:customStyle="{ marginRight: '20rpx', fontSize: '28rpx' }"
									v-for="(item, index) in bodyTypeList"
									:key="index"
									:label="item.label"
									:name="item.value"
								></uv-radio>
							</uv-radio-group>
						</view>
					</view>
					<view class="flex-box border-bottom-box form-item">
						<view class="right-box">衣服尺码</view>
						<view class="uni-list-cell-db auto-box">
							<picker class="flex-box" range-key="label" @change="bindPickerClothesSizeListTypeChange" :value="infoForm.clothesSize" :range="clothesSizeList">
								<view :class="[infoForm.clothesSize === '' ? 'placeholder-box' : '', 'uni-input auto-box']">
									{{ clothesSizeList.find((item) => item.value == infoForm.clothesSize)?.label || '请选择衣服尺码' }}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-box operate-box">
			<view class="add-box auto-box" @tap.stop="handleSave">保存</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import MyCamperApi from '@/api/camper/api';
import { info } from 'sass';
let isUpdate = ref(false);
const infoForm = ref({
	userName: '',
	certificateType: '1',
	idNo: '',
	birthday: '',
	gender: '',
	height: '',
	weight: '',
	bodyType: '',
	clothesSize: ''
});
const formLableMap = {
	userName: '请输入营员姓名',
	certificateType: '请选择证件类型',
	idNo: '请输入证件号码',
	birthday: '请选择出生日期',
	gender: '请选择性别',
	height: '请输入身高',
	weight: '请输入体重',
	bodyType: '请选择体型',
	clothesSize: '选择衣服尺码'
};
// 性别字典
let genderList = [];
// 体型字典
let bodyTypeList = [];
let clothesSizeList = [];
const clothesSize = ref(0);
const certificateType = ref(0);
// 证件类型
let certificateTypeList = [];
/**
 * @description 设置证件类型
 * @param {Object} e
 */
function bindPickerCertificateTypeChange(e) {
	certificateType.value = e.detail.value;
	infoForm.value.certificateType = certificateTypeList[e.detail.value].value;
}
function bindPickerClothesSizeListTypeChange(e) {
	infoForm.value.clothesSize = clothesSizeList[e.detail.value].value;
}
/**
 * @description 保存
 */
function handleSave() {
	for (let key of Object.keys(infoForm.value)) {
		if (!infoForm.value[key]) {
			uni.showToast({
				title: formLableMap[key],
				icon: 'none'
			});
			return false;
		}
	}
	if (isUpdate.value) {
		updateCamper();
	} else {
		addCamper();
	}
}
/**
 * @description 修改
 */
function updateCamper() {
	MyCamperApi.updateCamper(infoForm.value).then((res) => {
		if (res.code === '00000') {
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	});
}
/**
 * @description 新增
 */
function addCamper() {
	MyCamperApi.addCamper(infoForm.value).then((res) => {
		if (res.code === '00000') {
			uni.showToast({
				title: '新增成功',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	});
}
watch([() => infoForm.value.idNo], () => {
	const regex = /^(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
	// if(infoForm.value.idNo.length!==18&&!regex.test(infoForm.value.idNo)){
	// 	infoForm.value.birthday = ''
	// 	infoForm.value.gender = ''
	// 	return
	// }
	infoForm.value.birthday = getBirthdateFromID(infoForm.value.idNo);
	infoForm.value.gender = getGender(infoForm.value.idNo);
});

function getGender(idCardNumber) {
	if (idCardNumber.length !== 18) return;
	let gender = infoForm.value.idNo.substr(16, 1) % 2 === 0 ? '2' : '1';
	return gender;
}

/**
 * @description 获取出生日期
 * @param {String} idCardNumber
 */
function getBirthdateFromID(idCardNumber) {
	if (idCardNumber.length !== 18) return;
	let birthStr = idCardNumber.substr(6, 8);
	let year = birthStr.substr(0, 4);
	let month = birthStr.substr(4, 2);
	let day = birthStr.substr(6, 2);
	let formattedBirthdate = year + '-' + month + '-' + day;
	return formattedBirthdate;
}

onLoad((option) => {
	if (option?.item) {
		infoForm.value = JSON.parse(option?.item);
		infoForm.value.gender = infoForm.value.gender.toString();
		infoForm.value.bodyType = infoForm.value.bodyType.toString();
		isUpdate.value = true;
	}
	console.log(infoForm.value, 'infoForm');
	uni.setNavigationBarTitle({
		title: isUpdate.value ? '编辑营员' : '新增营员'
	});
	uni.getStorageSync('dict').forEach((item) => {
		switch (item.typeCode) {
			case 'gender':
				genderList = [...item.options];
				break;
			case 'bodyType':
				bodyTypeList = [...item.options];
				break;
			case 'certificateType':
				certificateTypeList = [...item.options];
				break;
			case 'clothingSize':
				clothesSizeList = [...item.options];
		}
	});
});
/**
 * @description 出生日期选择
 * @param e
 */
function bindPickerBirthdayChange(e) {
	console.log(infoForm.value);
	infoForm.value.birthday = e.detail.value;
}
</script>

<style lang="scss" scoped>
.addCamper {
	height: 100%;
	display: flex;
	flex-direction: column;

	.head-box {
		background: rgba(67, 207, 124, 0.21);
		padding: 10rpx 34rpx;
		font-size: 26rpx;
		color: rgba(67, 207, 124, 1);
	}

	.container-box {
		margin: 14rpx 20rpx;
		overflow: hidden;
		border-radius: 10rpx;
		padding: 20rpx;
		overflow: hidden;
	}

	.marks-box {
		margin-right: 10rpx;
		width: 6rpx;
		height: 20rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: linear-gradient(225deg, rgba(52, 165, 255, 1) 0%, rgba(54, 255, 173, 1) 100%);
	}

	.title {
		font-size: 32rpx;
		color: #000;
	}

	.form-item {
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #000;
	}

	.right-box {
		width: 194rpx;
	}

	.placeholder-box {
		color: rgba(144, 144, 144);
		font-size: 24rpx !important;
	}

	.top-box {
		margin-top: 20rpx;
	}

	.operate-box {
		justify-content: space-around;
		background: #fff;
		padding: 30rpx 0;
	}

	.add-box {
		border-radius: 10rpx;
		background: rgba(67, 207, 124, 1);
		font-size: 32rpx;
		color: #fff;
		padding: 22rpx 42rpx;
		margin: 0 94rpx;
		text-align: center;
	}
	.uni-input {
		font-size: 28rpx;
	}
	:deep(.uni-input-input) {
		font-size: 28rpx;
	}
}
</style>
